<template>
  <div>
    <!-- 头部搜索框 -->
    <van-sticky>
      <van-search
        v-model="value"
        placeholder="搜索你想要的宝贝"
        show-action
        shape="round"
        class="search"
      >
        <van-icon name="calender-o" slot='action' class="date" />
      </van-search>
    </van-sticky>

    <!--banner 轮播图组件 -->
    <v-swiper></v-swiper>
    <!--轮播图下方广告 宫格 -->
    <van-grid :column-num="2">
      <van-grid-item v-for="value in gridBox">
        <div class="myGrid">
          <div class="txt">
            <p>{{value.tit}}</p>
            <h3>{{value.con}}</h3>
          </div>
          <van-image :src="value.image" />
        </div>
      </van-grid-item>
    </van-grid>

    <!-- 单元格 -->
    <van-cell
      title="明星也在玩"
      label="你喜欢的明星都在这里"
      :center="true"
      value="更多"
      is-link=""
      title-class	="mx"
    >
      <span slot='icon' class="leftBar"></span>
    </van-cell>

    <!-- 自由滑动展示在玩明星 -->
    <swiper :options="swiperOption">
      <swiper-slide v-for='item in ustar'>
        <figure class="starStore">
          <van-image
            round
            width="2rem"
            height="2rem"
            :src="item.starImg"
          />
          <figcaption>
            <h3>{{item.starNick}}</h3>
            <p>{{item.starName}}</p>
          </figcaption>
        </figure>
      </swiper-slide>
    </swiper>

    <!-- 花语广场 -->
    <van-cell
      title="花语广场"
      label="爱生活爱分享"
      :center="true"
      value="更多"
      is-link=""
      title-class	="mx"
    >
      <span slot='icon' class="leftBar"></span>
    </van-cell>

    <!-- free模式滑动图片 -->
    <swiper :options="swiperOption">
      <swiper-slide v-for='item in box'>
        <van-image width="110" height="100" :src="item.image"></van-image>
      </swiper-slide>
    </swiper>

    <!-- 标签 -->
    <van-tabs v-model="cactive">
      <van-tab v-for="(item,index) in tabs" :title="item.tit" :to="{name:item.to,query:{active:index,pro_id:item.pro_id}}">
        <router-view @getHomeMsg='getVal' />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
  import VSwiper from '@/components/Swiper.vue';
  import * as info from '@/yoona/getProList.js';
  import * as get from '@/api/getProList.js';
  export default {
    name: 'Home',
    components:{
      VSwiper
    },
    data () {
      return {
        value:'',
        active:0,
        cactive:0,
        title:'首页',
        tabs:[
          {
            tit:'关注',
            to:'Focus',
          },
          {
            tit:'热门产品',
            to:'Summer',
            pro_id:"5dc28d485cb1e37b3e803465"
          },
          {
            tit:'时尚包袋',
            to:'Summer',
            pro_id:"5dc2a1c9a65d993beb14a19c"
          },
          {
            tit:'孕妈用品',
            to:'Summer',
            pro_id:"5dc2a1dfa65d993beb14a19e"
          },
          {
            tit:'婴儿喂养',
            to:'Summer',
            pro_id:"5dc2a179a65d993beb14a193"
          },
          {
            tit:'百变配饰',
            to:'Summer',
            pro_id:"5dc2a1d6a65d993beb14a19d"
          },
          {
            tit:'生活用品',
            to:'Summer',
            pro_id:"5dc2a1aea65d993beb14a199"
          },
          {
            tit:'童婴服装',
            to:'Summer',
            pro_id:"5dc2a185a65d993beb14a194"
          },
          {
            tit:'男士专区',
            to:'Summer',
            pro_id: "5dc2a199a65d993beb14a196"
          },
          {
            tit:'美妆洗护',
            to:'Summer',
            pro_id:"5dc2a191a65d993beb14a195"
          },
          {
            tit:'其它家电',
            to:'Summer',
            pro_id:"5dc2a1a7a65d993beb14a198"
          }
        ],
        gridBox:[
          {
            tit:'全场1元',
            con:'一起参与分享吧',
            image:'./static/img/p1.jpg'
          },
          {
            tit:'花粉币专区',
            con:'超值好物免费换',
            image:'./static/img/p7.jpg'
          },
          {
            tit:'每日上新',
            con:'最新情报专区',
            image:'./static/img/p6.jpg'
          },
          {
            tit:'母婴专区',
            con:'百万妈妈的选择',
            image:'./static/img/p2.jpg'
          }
        ],
        swiperOption: {  //自由模式轮播组件
          slidesPerView: 3,
          spaceBetween: 30,
          freeMode: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          }
        },
        box:[// 自由滑动图片展示
          {
            image:'./static/img/lb5.png'
          },
          {
            image:'./static/img/lb6.png'
          },
          {
            image:'./static/img/lb7.png'
          },
          {
            image:'./static/img/lb1.png'
          },
          {
            image:'./static/img/lb2.gif'
          },
          {
            image:'./static/img/lb3.gif'
          },
          {
            image:'./static/img/lb4.png'
          }
        ],
        ustar:[]// 在玩明星
      }
    },
    mounted(){
      this.$emit('getMsg',{active:this.active});
      // 获取在玩明星
      info.getStar({}).then(res=>{
        if(res.data.code == 1){
          this.ustar=res.data.data;
        }
      });
    },
    methods:{
      getVal(msg){
        this.cactive = msg.active
      }
    }
  }
</script>

<style scoped>
  .search{
    background: rgba(255,0,0,0)!important;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    overflow: hidden;
    width: 100%;
  }
  .search .van-search__content{
    background: rgba(255,255,255,0.4);
  }
  .date{
    font-size: 36px;
    color: #fff;
  }

  .myGrid{
    display: flex;
  }
  .txt{
    text-align: left;
  }
  .txt h3,.txt p{
    margin: 0;
    padding: 0;
  }
  .txt h3{
    font-size: 12px;
  }
  .txt p{
    font-size: 14px;
    font-weight: 600;
  }
  .mx{
    font-weight: 600;
  }
  .starStore h3{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    margin-top: 6px;
  }
  .starStore p{
    margin-bottom: 4px;
  }
  .van-image{
    width: 45px;
    height: 45px;
  }
  .starSore img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .leftBar{
    width: 6px;
    height: 44px;
    background: pink;
    border-radius: 10px;
  }
  .van-cell__title{
    text-align: left;
    padding-left: 8px;
    font-weight: 600;
  }
  .van-cell__right-icon{
    background: pink;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: white;
  }
</style>
